<script setup>
import { useCalendarStore } from "../stores/calendar";

import { storeToRefs } from "pinia";

const calendar = useCalendarStore();

// 获取当前月份、年份、日期
const { currentMonth, currentYear, currentDate } = storeToRefs(calendar);

// console.log(currentMonth, currentYear, currentDate, "in HeaderCom");
// 获取设置当前月份、年份、日期的方法
const { setCurrentMonth, setCurrentYear, setCurrentDate } = calendar;

// console.log(setCurrentDate, setCurrentMonth, setCurrentYear, "in HeaderCom");

// 增加、减少月份的方法
const increasMonth = () => {
  setCurrentMonth(currentMonth.value + 1);
};

const decreasMonth = () => {
  setCurrentMonth(currentMonth.value - 1);
};

//切换月份，年份
const changeMonth = (e) => {
  setCurrentMonth(parseInt(e.target.value));
};

const changeYear = (e) => {
  setCurrentYear(parseInt(e.target.value));
};

// 切换到今天
const today = () => {
  const date = new Date();
  setCurrentMonth(date.getMonth() + 1);
  setCurrentYear(date.getFullYear());
  setCurrentDate(date.getDate());
};
</script>

<template>
  <div class="header">
    <div class="bg"></div>
    <select class="holiday-select">
      <option value="">假期</option>
    </select>
    <select class="year-select" :value="currentYear" @change="changeYear">
      <option v-for="i in 150" :value="i + 1899">{{ i + 1899 }}年</option>
    </select>
    <div class="month">
      <button class="change-month" @click="decreasMonth"><</button>
      <select class="month-select" :value="currentMonth" @change="changeMonth">
        <option v-for="i in 12" :value="i">{{ i }}月</option>
      </select>
      <button class="change-month" @click="increasMonth">></button>
    </div>
    <button class="today-btn" @click="today">今天</button>
  </div>
</template>

<style scoped>
.bg {
  height: 77px;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: #eaecf3;
  z-index: -1;
}

.header {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 40px;
  margin: -0.16rem -0.16rem 0;
  padding: 10px 0.16rem 0.28rem;
  border-top-left-radius: 0.16rem;
  border-top-right-radius: 0.16rem;
}

select {
  height: 30px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  padding: 0 0.6rem 0 0.12rem;
  font-size: 16px;
  color: #666;
  outline: none;
}

button.change-month {
  background: rgba(0, 0, 0, 0);
  border: none;
  font-weight: 700;
  color: #666;
}
.today-btn {
  background-color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
}

.today-btn:hover {
  background-color: #f5f5f5;
}
</style>